<template>
  <div class="dashboard-container">
    <div class="pb-2">
      <!-- 登录信息 -->
      <el-row :gutter="10" class="mt-2">
        <el-col :span="24">
          <el-card shadow="never">
            <div class="flex flex-wrap">
              <div class="w-1/2">
                <div class="flex items-start">
                  <img
                    class="w80px h80px rounded-full"
                    :src="userStore.userInfo.avatar + '?imageView2/1/w/80/h/80'"
                  />
                  <div class="ml-5">
                    <p>{{ greetings }}</p>
                    <p class="text-sm text-gray">
                      今日天气晴朗，气温在15℃至25℃之间，东南风。
                    </p>
                  </div>
                </div>
              </div>
              <div class="w-1/2">
                <el-row>
                  <el-col :span="16">
                    <div class="flex flex-wrap">
                      <el-button
                        class="m-2"
                        type="primary"
                        @click="testHandler"
                      >
                        开发测试
                      </el-button>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="flex justify-end">
                      <el-tooltip
                        content="你可以请作者喝杯咖啡表示鼓励"
                        placement="top-start"
                      >
                        <img
                          src="@/assets/images/wechat.png"
                          alt="weixin"
                          style="width: 90px; height: 90px; margin-right: 10px"
                        />
                      </el-tooltip>
                      <el-tooltip
                        content="你可以请作者喝杯咖啡表示鼓励"
                        placement="top-start"
                      >
                        <img
                          src="@/assets/images/zhifubao.png"
                          alt="weixin"
                          style="width: 90px; height: 90px"
                        />
                      </el-tooltip>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 统计数据 -->
      <el-row
        :gutter="10"
        class="mt-2"
        v-if="dashboardSetting?.system_show_datas == 1"
      >
        <el-col :span="6" :xs="24">
          <StatCard
            title="访问统计"
            unit="日"
            tag-type="success"
            :daily-count="visitData.dailyCount"
            :total-count="visitData.totalCount"
            total-label="累计访问"
            icon-name="visitor"
            :loading="false"
          />
        </el-col>
        <el-col :span="6" :xs="24">
          <StatCard
            title="用户登录"
            unit="日"
            tag-type="success"
            :daily-count="loginData.dailyCount"
            :total-count="loginData.totalCount"
            total-label="累计登录"
            icon-name="ip"
            :loading="false"
          />
        </el-col>
        <el-col :span="6" :xs="24">
          <StatCard
            title="用户注册"
            unit="日"
            tag-type="success"
            :daily-count="userData.dailyCount"
            :total-count="userData.totalCount"
            total-label="累计用户"
            icon-name="user"
            :loading="false"
          />
        </el-col>
        <el-col :span="6" :xs="24">
          <StatCard
            title="订单统计"
            unit="日"
            tag-type="success"
            :daily-count="orderData.dailyCount"
            :total-count="orderData.totalCount"
            total-label="累计订单"
            icon-name="project"
            :loading="false"
          />
        </el-col>
      </el-row>
      <!-- 统计图表 -->
      <el-row
        :gutter="10"
        class="mt-2"
        v-if="dashboardSetting?.system_show_charts == 1"
      >
        <el-col :span="12" :xs="24">
          <el-card>
            <template #header>
              <span>登录趋势</span>
            </template>
            <ECharts :options="chartOptionsLogin" height="300px" />
          </el-card>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-card>
            <template #header>
              <span>登录趋势</span>
            </template>
            <ECharts :options="chartOptionsAction" height="300px" />
          </el-card>
        </el-col>
      </el-row>
      <!-- 系统信息 -->
      <el-row
        :gutter="10"
        class="mt-2"
        v-if="dashboardSetting?.system_show_info == 1"
      >
        <el-col :span="12" :xs="24">
          <SystemInfoDisplay
            :system-info="systemInfo"
            :loading="false"
            title="服务器系统信息"
            scroll-height="275px"
            :column="1"
            :border="true"
            label-width="140px"
            value-class="text-sm"
          />
        </el-col>
        <el-col :span="12" :xs="24">
          <VersionTimeline
            :version-list="basicVersionList"
            scrollHeight="300px"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: 'Dashboard',
  inheritAttrs: false,
});

import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';
import { useLineChart } from '@/composables/useLineChart';
import { useUserStore } from '@/store/modules/user';

import StatCard from './StatCard.vue';
import VersionTimeline from './VersionTimeline.vue';
import SystemInfoDisplay from './SystemInfoDisplay.vue';

import DashboardAPI from '@/api/admin/dashboard';
import IndexAPI from '@/api/admin/index';
import LoginAPI from '@/api/admin/login';

// 导航设置
const dashboardSetting = ref(null);
// 系统信息
const systemInfo = ref([]);
// 当前用户信息
const userStore = useUserStore();
// 当前时间（用于计算问候语）
const currentDate = new Date();
// 问候语：根据当前小时返回不同问候语
const greetings = computed(() => {
  const hours = currentDate.getHours();
  const nickname = userStore.userInfo.nickname;
  if (hours >= 6 && hours < 8) {
    return '晨起披衣出草堂，轩窗已自喜微凉🌅！';
  } else if (hours >= 8 && hours < 12) {
    return `上午好，${nickname}！`;
  } else if (hours >= 12 && hours < 18) {
    return `下午好，${nickname}！`;
  } else if (hours >= 18 && hours < 24) {
    return `晚上好，${nickname}！`;
  } else {
    return '偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！';
  }
});
// 测试接口1
const testHandler = () => {
  IndexAPI.test().then((res) => {
    console.log(res);
    ElMessage.success(res.message);
  });
};
// 访问统计
const visitData = ref({
  dailyCount: 100,
  totalCount: 1200,
});
// 登录统计
const loginData = ref({
  dailyCount: 25,
  totalCount: 850,
});
// 用户统计
const userData = ref({
  dailyCount: 25,
  totalCount: 850,
});
// 订单统计
const orderData = ref({
  dailyCount: 45,
  totalCount: 2300,
});
// 登录图表
const { chartOptions: chartOptionsLogin, updateData: updateDataLogin } =
  useLineChart({
    title: '登录趋势',
    seriesName: '登录次数',
    color: '#4080FF',
    smooth: true,
    showArea: true,
    areaOpacity: 0.1,
  });
// 访问图表
const { chartOptions: chartOptionsAction, updateData: updateDataAction } =
  useLineChart({
    title: '访问趋势',
    seriesName: '访问次数',
    color: '#67C23A',
    smooth: true,
    showArea: true,
    areaOpacity: 0.1,
  });
// 版本时间线演示数据
const basicVersionList = ref([
  {
    id: '1',
    title: 'v2.4.0',
    date: '2025-01-01 00:00:00',
    content: '实现基础框架搭建，包含权限管理、路由系统等核心功能。',
    link: 'https://doc.simplest.net.cn',
    tag: '里程碑',
  },
  {
    id: '2',
    title: 'v2.3.5',
    date: '2024-12-15 10:30:00',
    content: '修复了若干已知问题，优化了用户体验。',
    link: 'https://doc.simplest.net.cn',
    tag: '修复',
  },
  {
    id: '3',
    title: 'v2.3.0',
    date: '2024-12-01 14:20:00',
    content: '新增了数据可视化功能，支持多种图表类型。',
    link: 'https://doc.simplest.net.cn',
    tag: '新功能',
  },
]);

onMounted(async () => {
  // 并发处理多个异步操作
  const promises = [
    DashboardAPI.index(),
    DashboardAPI.getLoginChartData(),
    DashboardAPI.getActionChartData(),
    DashboardAPI.getSystemInfo(),
  ];
  const [dashboardData, loginData, visitData, systemData] =
    await Promise.all(promises);
  dashboardSetting.value = dashboardData.data;
  updateDataLogin(loginData.data);
  updateDataAction(visitData.data);
  systemInfo.value = systemData.data;
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 5px;
  height: calc(100vh - 80px);
  overflow: auto;

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }
}
</style>
